<template>
    <div class="productComment">
        <div class="commentClassify">
            <ul>
                <li><a href="javascript:void(0);" :class="{commentItem:true,activeComments:allCommentsStatus}" @click="allCommentsClick()">全部</a></li>
                <li><a href="javascript:void(0);" :class="{commentItem:true,activeComments:goodCommentsStatus}" @click="goodCommentsClick()">好评(13)</a></li>
                <li><a href="javascript:void(0);" :class="{commentItem:true,activeComments:neutralCommentsStatus}" @click="neutralCommentsClick">中评(3)</a></li>
                <li><a href="javascript:void(0);" :class="{commentItem:true,activeComments:badCommentsStatus}" @click="badCommentsClick()">差评(0)</a></li>
            </ul>
        </div>
        <!--所有评论-->
        <div class="allCommentList" v-show="allCommentsStatus">
            <div class="commenListItem">
                <div class="userHeader"></div>
                <div class="userCommentMsg">
                    <div class="userName">Jeffly Sme</div>
                    <div class="commentMsg">正品好评,带着超帅的,下次再来哈就换个卡和客户可骄傲和和i哈克几乎疯狂骄傲和卡和客户可骄傲和和i哈克几乎疯狂骄傲和卡和客户可骄傲和和i哈克几乎疯狂骄傲和</div>
                    <div class="dateAndProduct">2017-04-10 颜色: Bristol (玫瑰金表盖)</div>
                </div>
            </div>
            <div class="commenListItem">
                <div class="userHeader"></div>
                <div class="userCommentMsg">
                    <div class="userName">Jeffly Sme</div>
                    <div class="commentMsg">正品好评,带着超帅的,下次再来哈就换</div>
                    <div class="dateAndProduct">2017-04-10 颜色: Bristol (玫瑰金表盖)</div>
                </div>
            </div> 
            <div class="commenListItem">
                <div class="userHeader"></div>
                <div class="userCommentMsg">
                    <div class="userName">Jeffly Sme</div>
                    <div class="commentMsg">正品好评,带着超帅的,下次再来哈就换</div>
                    <div class="dateAndProduct">2017-04-10 颜色: Bristol (玫瑰金表盖)</div>
                </div>
            </div> 
            <div class="commenListItem">
                <div class="userHeader"></div>
                <div class="userCommentMsg">
                    <div class="userName">Jeffly Sme</div>
                    <div class="commentMsg">正品好评,带着超帅的,下次再来哈就换</div>
                    <div class="dateAndProduct">2017-04-10 颜色: Bristol (玫瑰金表盖)</div>
                </div>
            </div> 
        </div>
        <!--好评-->
        <div class="goodCommentList" v-show="goodCommentsStatus">
            <div class="commenListItem">
                <div class="userHeader"></div>
                <div class="userCommentMsg">
                    <div class="userName">Jeffly Sme</div>
                    <div class="commentMsg">正品好评,带着超帅的,下次再来哈就换个卡和客户可骄傲和和i哈克几乎疯狂骄傲和卡和客户可骄傲和和i哈克几乎疯狂骄傲和卡和客户可骄傲和和i哈克几乎疯狂骄傲和</div>
                    <div class="dateAndProduct">2017-04-10 颜色: Bristol (玫瑰金表盖)</div>
                </div>
            </div>
            <div class="commenListItem">
                <div class="userHeader"></div>
                <div class="userCommentMsg">
                    <div class="userName">Jeffly Sme</div>
                    <div class="commentMsg">正品好评,带着超帅的,下次再来哈就换个卡和客户可骄傲和和i哈克几乎疯狂骄傲和卡和客户可骄傲和</div>
                    <div class="dateAndProduct">2017-04-10 颜色: Bristol (玫瑰金表盖)</div>
                </div>
            </div>
        </div>
        <!--中评-->
        <div class="neutralCommentList" v-show="neutralCommentsStatus">
             <div class="commenListItem">
                <div class="userHeader"></div>
                <div class="userCommentMsg">
                    <div class="userName">Jeffly Sme</div>
                    <div class="commentMsg">正品好评,带着超帅的,下次再来哈就换个卡和客户可骄傲和和i哈克几乎疯狂骄傲和卡和客户可骄傲和和i哈克几乎疯狂骄傲和卡和客户可骄傲和和i哈克几乎疯狂骄傲和</div>
                    <div class="dateAndProduct">2017-04-10 颜色: Bristol (玫瑰金表盖)</div>
                </div>
            </div>
            <div class="commenListItem">
                <div class="userHeader"></div>
                <div class="userCommentMsg">
                    <div class="userName">Jeffly Sme</div>
                    <div class="commentMsg">正品好评,带着超帅的,下次再来哈就换个卡和客户可骄傲和和i哈克几乎疯狂骄傲和卡和客户可骄傲和</div>
                    <div class="dateAndProduct">2017-04-10 颜色: Bristol (玫瑰金表盖)</div>
                </div>
            </div>
             <div class="commenListItem">
                <div class="userHeader"></div>
                <div class="userCommentMsg">
                    <div class="userName">Jeffly Sme</div>
                    <div class="commentMsg">正品好评,带着超帅的,下次再来哈就换个卡和客户可骄傲和和i哈克几乎疯狂骄傲和卡和客户可骄傲和和i哈克几乎疯狂骄傲和卡和客户可骄傲和和i哈克几乎疯狂骄傲和</div>
                    <div class="dateAndProduct">2017-04-10 颜色: Bristol (玫瑰金表盖)</div>
                </div>
            </div>
            <div class="commenListItem">
                <div class="userHeader"></div>
                <div class="userCommentMsg">
                    <div class="userName">Jeffly Sme</div>
                    <div class="commentMsg">正品好评,带着超帅的,下次再来哈就换个卡和客户可骄傲和和i哈克几乎疯狂骄傲和卡和客户可骄傲和</div>
                    <div class="dateAndProduct">2017-04-10 颜色: Bristol (玫瑰金表盖)</div>
                </div>
            </div>
        </div>
        <!--差评-->
        <div class="badCommentList" v-show="badCommentsStatus">
             <div class="commenListItem">
                <div class="userHeader"></div>
                <div class="userCommentMsg">
                    <div class="userName">Jeffly Sme</div>
                    <div class="commentMsg">正品好评,带着超帅的,下次再来哈就换个卡和客户可骄傲和和i哈克几乎疯狂骄傲和卡和客户可骄傲和和i哈克几乎疯狂骄傲和卡和客户可骄傲和和i哈克几乎疯狂骄傲和</div>
                    <div class="dateAndProduct">2017-04-10 颜色: Bristol (玫瑰金表盖)</div>
                </div>
            </div>
            <div class="commenListItem">
                <div class="userHeader"></div>
                <div class="userCommentMsg">
                    <div class="userName">Jeffly Sme</div>
                    <div class="commentMsg">正品好评,带着超帅的,下次再来哈就换个卡和客户可骄傲和和i哈克几乎疯狂骄傲和卡和客户可骄傲和</div>
                    <div class="dateAndProduct">2017-04-10 颜色: Bristol (玫瑰金表盖)</div>
                </div>
            </div>
        </div>
        <div class="commentsFooter">已到底部</div>
    </div>
</template>
<style lang="less">
    @import "../static/css/productDetail/productComment.less";
</style>
<script>
    export default {
        data() {
            return {
                allCommentsStatus:true,
                goodCommentsStatus:false,
                neutralCommentsStatus:false,
                badCommentsStatus:false
            }
        },
        methods:{
            allCommentsClick:function(){
                this.allCommentsStatus = true;
                this.goodCommentsStatus = false;
                this.neutralCommentsStatus = false;
                this.badCommentsStatus = false;
            },
            goodCommentsClick:function(){
                this.allCommentsStatus = false;
                this.goodCommentsStatus = true;
                this.neutralCommentsStatus = false;
                this.badCommentsStatus = false;
            },
            neutralCommentsClick:function(){
                this.allCommentsStatus = false;
                this.goodCommentsStatus = false;
                this.neutralCommentsStatus = true;
                this.badCommentsStatus = false;
            },
            badCommentsClick:function(){
                this.allCommentsStatus = false;
                this.goodCommentsStatus = false;
                this.neutralCommentsStatus = false;
                this.badCommentsStatus = true;
            }
        }
    }
</script>

